<section ng-show="open" ng-keyup="keyUp($event)" tabindex="1" class="modal modal-animation ng-hide modal-open" id="acl-details-modal" ng-controller="AclCtrl">

  <header>
    <a class="fa fa-times close-modal" ng-click="close()"></a>
    <h2 translate="USERS.ACLS.DETAILS.HEADER" translate-values="{{metadata}}">
      <!-- Access Policy Details -->
    </h2>
  </header>

  <nav class="modal-nav" id="modal-nav">
    <a ng-click="openTab('metadata')" data-modal-tab="metadata" ng-class="{ active: tab == 'metadata' }" translate="USERS.ACLS.DETAILS.TABS.METADATA">
      <!-- Metadata -->
    </a>
    <a ng-click="openTab('access')" data-modal-tab="access" ng-class="{ active: tab == 'access' }" translate="USERS.ACLS.DETAILS.TABS.ACCESS">
      <!-- Access -->
    </a>
  </nav>

  <nav id="breadcrumb"></nav>

  <a ng-click="showAdjacent(true)" ng-if="hasAdjacent(true)"><i class="arrow fa fa-chevron-left"></i></a>
  <a ng-click="showAdjacent()" ng-if="hasAdjacent()"><i class="arrow fa fa-chevron-right"></i></a>

  <div class="modal-content"  data-modal-tab-content="metadata" data-level="1">
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="acl-form"></div>
      <div class="full-col">
        <ul>
          <li>
            <div class="obj tbl-details">
              <header translate="USERS.ACLS.DETAILS.METADATA.TITLE"><!-- Name --></header>
              <div class="obj-container">
                <table class="main-tbl">
                  <tr>
                    <td>{{ 'USERS.ACLS.DETAILS.METADATA.NAME.CAPTION' | translate }}<i class="required">*</i></td>
                    <td>
                      <input
                        class="hidden-input"
                        ng-model="metadata.name"
                        ng-model-options="{ debounce: {'default': 500} }"
                        ng-required="true"
                        placeholder="{{ 'USERS.ACLS.DETAILS.METADATA.NAME.PLACEHOLDER' | translate }}"
                        sanitize-xml="metadata.name">
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="modal-content" data-modal-tab-content="access" data-level="1">
    <p class="tab-desc"></p>
    <div class="modal-body">
      <div data-admin-ng-notifications="" context="acl-form"></div>
      <div class="full-col">
        <ul>
          <li>
            <div class="obj list-obj">
              <header translate="USERS.ACLS.DETAILS.TABS.ACCESS"><!-- Access Policy --></header>
              <div class="obj-container">
                <div class="obj tbl-list">
                  <table class="main-tbl" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')">
                    <thead>
                      <tr>
                        <th translate="USERS.ACLS.DETAILS.ACCESS.TEMPLATES.TITLE">
                          <!-- Templates -->
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <div class="obj-container padded">
                            <p translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.DESCRIPTION">
                            <!-- Description -->
                            </p>
                            <select chosen
                                    pre-select-from="acls"
                                    data-width="'200px'"
                                    ng-change="changeBaseAcl(baseAclId)"
                                    ng-model="baseAclId"
                                    ng-options="id as name for (id, name) in acls"
                                    placeholder-text-single="'{{ 'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.LABEL' | translate }}'"
                                    no-results-text="'{{ 'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.EMPTY' | translate }}'"
                                    ></select>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="obj-container" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_USER_ROLES_VIEW')">
                <div class="obj tbl-list">
                  <header translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.USERS">
                    <!-- Details -->
                  </header>
                  <div class="obj-container">
                    <table class="main-tbl">
                      <thead>
                        <tr>
                          <th translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.USER">
                            <!-- Role -->
                          </th>
                          <th class="fit">
                            <!-- Read -->
                            {{ 'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.READ' | translate }}
                            <span title="{{ 'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.HELP.READ' | translate}}"
                                  class="fa fa-question-circle">
                            </span>
                          </th>
                          <th class="fit">
                            <!-- Write -->
                            {{ 'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.WRITE' | translate }}
                            <span title="{{ 'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.HELP.WRITE' | translate}}"
                                  class="fa fa-question-circle">
                            </span>
                          </th>
                          <th translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="hasActions">
                            <!--Additional Actions-->
                          </th>
                          <th translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.ACTION" class="fit">
                            <!-- Action -->
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="policy in policiesUser | filter: userExists">
                          <td>
                            <select chosen
                                    pre-select-from="users"
                                    ng-disabled="!$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')"
                                    data-width="'360px'"
                                    ng-model="policy.role"
                                    ng-options="user.userRole as userToStringForDetails(user) for user in users"
                                    call-on-search="getMatchingRoles"
                                    placeholder-text-single="'{{ 'USERS.ACLS.DETAILS.ACCESS.ROLES.LABEL' | translate }}'"
                                    no-results-text="'{{ 'USERS.ACLS.DETAILS.ACCESS.ROLES.EMPTY' | translate }}'"
                                    ></select>
                          </td>
                          <td class="fit"><input type="checkbox" ng-model="policy.read" ng-disabled="aclCreateDefaults['read_readonly']"/></td>
                          <td class="fit"><input type="checkbox" ng-model="policy.write" ng-disabled="aclCreateDefaults['write_readonly']"/></td>
                          <td class="fit editable" ng-if="hasActions">
                            <div ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')" save="save" admin-ng-editable-multi-select mixed="false" params="policy.actions" collection="actions"></div>
                            <div ng-if="(!$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT'))" ng-repeat="customAction in policy.actions.value">{{ customAction }}</div>
                          </td>
                          <td class="fit" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')"><a ng-click="deletePolicy(policiesUser, policy)" class="remove"></a>
                          </td>
                        </tr>
                        <!-- Another loop specifically to show user roles for which no user exists -->
                        <tr ng-repeat="policy in policiesUser | filter: not(userExists)">
                          <td>
                            <p>{{'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.NONEXISTENT_USER' | translate}}: {{policy.userDoesNotExist}}</p>
                          </td>
                          <td class="fit"><input type="checkbox" ng-model="policy.read" ng-disabled="true"/></td>
                          <td class="fit"><input type="checkbox" ng-model="policy.write" ng-disabled="true"/></td>
                          <td class="fit editable" ng-if="hasActions">
                            <div ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')" save="save" admin-ng-editable-multi-select mixed="false" params="policy.actions" collection="actions"></div>
                            <div ng-if="(!$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT'))" ng-repeat="customAction in policy.actions.value">{{ customAction }}</div>
                          </td>
                          <td class="fit" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')"><a ng-click="deletePolicy(policiesUser, policy)" class="remove"></a>
                          </td>
                        </tr>
                        <tr ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')" >
                          <td colspan="5"><a ng-click="addPolicy(policiesUser)">+ {{ 'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.NEW_USER' | translate }}</a></td>
                          <tr>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
              <!-- Work in progress: Here, we will fill in the currently set privileges. The backend will
                change the format of the response. -->
                <div class="obj-container" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_NONUSER_ROLES_VIEW')">
                  <div class="obj tbl-list">
                    <header translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.DETAILS">
                      <!-- Details -->
                    </header>
                    <div class="obj-container">
                      <table class="main-tbl">
                        <thead>
                          <tr>
                            <th translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.ROLE">
                              <!-- Role -->
                            </th>
                            <th translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.READ" class="fit">
                              <!-- Read -->
                            </th>
                            <th translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.WRITE" class="fit">
                              <!-- Write -->
                            </th>
                            <th translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS" class="fit" ng-if="hasActions">
                              <!--Additional Actions-->
                            </th>
                            <th translate="USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.ACTION" class="fit">
                              <!-- Action -->
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="policy in policies">
                            <td>
                              <select chosen
                                      pre-select-from="roles"
                                      ng-disabled="!$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')"
                                      data-width="'360px'"
                                      ng-model="policy.role"
                                      ng-options="role as role for role in roles | filter: filterUserRoles"
                                      call-on-search="getMatchingRoles"
                                      placeholder-text-single="'{{ 'USERS.ACLS.DETAILS.ACCESS.ROLES.LABEL' | translate }}'"
                                      no-results-text="'{{ 'USERS.ACLS.DETAILS.ACCESS.ROLES.EMPTY' | translate }}'"
                                      ></select>
                            </td>
                            <td class="fit"><input type="checkbox" ng-model="policy.read" ng-disabled="aclCreateDefaults['read_readonly']"/></td>
                            <td class="fit"><input type="checkbox" ng-model="policy.write" ng-disabled="aclCreateDefaults['write_readonly']"/></td>
                            <td class="fit editable" ng-if="hasActions">
                              <div ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')" save="save" admin-ng-editable-multi-select mixed="false" params="policy.actions" collection="actions"></div>
                              <div ng-if="(!$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT'))" ng-repeat="customAction in policy.actions.value">{{ customAction }}</div>
                            </td>
                            <td class="fit" ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')"><a ng-click="deletePolicy(policies, policy)" class="remove"></a>
                            </td>
                          </tr>
                          <tr ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')" >
                            <td colspan="5"><a ng-click="addPolicy(policies)">+ {{ 'USERS.ACLS.DETAILS.ACCESS.ACCESS_POLICY.NEW' | translate }}</a></td>
                            <tr>
                            </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="btm-spacer"></div>
  <footer>
    <a ng-click="submit()" class="submit {{ getSubmitButtonState() }}" translate="SUBMIT">
      <!-- Submit -->
    </a>
    <a ng-click="close()" class="cancel" translate="CANCEL">
      <!-- Cancel -->
    </a>
  </footer>
</section>
